<template>
    <div class="ipt">
        <div class="add">
            编号:<input type="text" v-model="code" />
            品牌名称:<input type="text" v-model="productName">
            <br>
            产品图片地址:<input type="text" v-model="imgSrc">

            价格:<input type="text" v-model="price">
            <input type="button" value="添加" @click="add">
        </div>

        <div class="add">
            品牌名称:<input type="text" placeholder="请输入搜索条件" v-model="keyword">
        </div>

    </div>
</template>
<script>
export default {
    props: {
        old: {
            type: Array,
        }
    },
    data() {
        return {
            code: "",
            productName: "",
            imgSrc: "",
            price: "",
            keyword: ""
        }
    },
    watch: {
        keyword(newVal) {
          let result =  this.old.filter((item) => item.productName.indeof(newVal) !== -1);
            console.log(result);
        }
    },
    methods: {
        add() {
            if (!this.code || !this.productName || !this.imgSrc || !this.price) {
                return;
            }
            let obj = {
                id: Math.random().toString(32).substring(2),
                code: this.code,
                imgSrc: this.imgSrc,
                productName: this.productName,
                price: this.price,
                count: 1
            }
            this.$emit('add', obj)
        }
    }
}
</script>
<style scoped>
.add {
    padding: 5px;
    border: 1px solid black;
    margin-bottom: 10px;
}
</style>